<template>
  <div class="content">
    <div class="active">
      <div class="header">设备总览</div>
      <div class="bodyobj">
        <div class="body">
          <div class="description">
            <span>门禁设备</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-设备分析_slices/门禁设备.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>人脸抓拍</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-设备分析_slices/人脸抓拍.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>车辆抓拍</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-设备分析_slices/车辆抓拍.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>视频监控</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-设备分析_slices/视频监控.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>消防监控</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-设备分析_slices/消防监控.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>传感器</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-设备分析_slices/传感器.png" alt />
        </div>
      </div>
    </div>
    <div class="topoffset">
      <div class="father1">
        <div id="device" />
        <div class="son1">
          <div>各设备占比</div>
        </div>
      </div>
      <div class="father2">
        <div id="good" />
        <div class="son2">
          <div>实有设备及完好率</div>
        </div>
      </div>
    </div>
    <div class="bottomoffset">
      <div class="father3">
        <div id="bad" />
        <div class="son3">
          <div>设备故障数量及处理率</div>
        </div>
      </div>

      <div class="father4">
        <div id="energe" />
        <div class="son4">
          <div>设备能耗分析</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "Dashboard",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    var myChart1 = echarts.init(document.getElementById("device"));
    var option1 = {
      color: ["#6495FB", "#62DAAC", "#647798", "#F6C020"],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        top: "middle",
        left: "right",
        data: ["门禁设备", "人脸抓拍", "车辆抓拍", "视频设备"],
        icon: "circle"
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "门禁设备" },
            { value: 310, name: "人脸抓拍" },
            { value: 234, name: "车辆抓拍" },
            { value: 135, name: "视频设备" }
          ],
          roseType: "angle",
          // 文字调整
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          labelLine: {
            show: false
          },
          label: {
            position: "outside",
            show: false,
            align: "center"
          }
        }
      ]
    };
    myChart1.setOption(option1);
    var myChart2 = echarts.init(document.getElementById("good"));
    var option2 = {
      color: ["#DCE7FD", "#5A8BDB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999"
          }
        }
      },
      legend: {
        data: ["设备个数", "完好率"],
        right: 80
      },
      xAxis: [
        {
          type: "category",
          data: ["门禁设备", "人脸抓拍", "车辆抓拍", "视频设备", "消费设备"],
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: "{value} "
          }
        }
      ],
      series: [
        {
          name: "设备个数",
          type: "bar",
          data: [30, 49, 70, 232, 210]
        },

        {
          name: "完好率",
          type: "line",
          data: [30, 22, 33, 45, 63]
        }
      ]
    };
    myChart2.setOption(option2);
    var myChart3 = echarts.init(document.getElementById("bad"));
    var option3 = {
      color: ["#F7DFD5", "#E5A8BA"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999"
          }
        }
      },
      legend: {
        data: ["设备个数", "完好率"],
        right: 80
      },
      xAxis: [
        {
          type: "category",
          data: ["门禁设备", "人脸抓拍", "车辆抓拍", "视频设备", "消费设备"],
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: "{value} "
          }
        }
      ],
      series: [
        {
          name: "设备个数",
          type: "bar",
          data: [30, 49, 70, 232, 210]
        },

        {
          name: "完好率",
          type: "line",
          data: [30, 22, 33, 45, 63]
        }
      ]
    };
    myChart3.setOption(option3);
    var myChart4 = echarts.init(document.getElementById("energe"));
    var option4 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      color: ["#739FFC", "#71DEB4"],
      legend: {
        data: ["峰值", "谷值"],
        right: 30
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: ["电梯", "水泵", "中央空调", "公共照明"]
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            formatter: "{value}KW・h"
          }
        }
      ],
      series: [
        {
          name: "峰值",
          type: "bar",
          data: [320, 320, 320, 332]
        },

        {
          name: "谷值",
          type: "bar",
          data: [862, 1018, 964, 1026]
        }
      ]
    };
    myChart4.setOption(option4);
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.content {
  padding: 18px;
  padding-bottom: 100px;
  min-height: 800px;
  position: relative;
  .active {
    padding: 19px 30px;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 10px;
    .header {
      font-size: 20px;
      margin-bottom: 35px;
      padding-bottom: 19px;
      border-bottom: 1px solid #f5f5f5;
    }
    .bodyobj {
      display: flex;
      flex-wrap: wrap;
      .body {
        margin-right: 20px;
        width: 218px;
        height: 110px;
        margin-bottom: 30px;
        position: relative;
        .description {
          position: absolute;
          top: 35px;
          left: 20px;
          span {
            font-size: 16px;
            color: #fff;
          }
          i {
            font-style: initial;
            font-size: 26px;
            color: #fff;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  #device {
    width: 100%;
    height: 100%;
  }
  #good {
    position: absolute;
    top: 75px;
    width: 100%;
    height: 90%;
  }
  #bad {
    position: absolute;
    top: 75px;
    width: 100%;
    height: 90%;
    margin-right: 20px;
  }
  #energe {
    position: absolute;
    top: 75px;
    width: 100%;
    height: 85%;
  }
  .topoffset {
    display: flex;
    .father1 {
      position: relative;
      border-radius: 10px;
      flex: 2;
      height: 492.4px;
      margin-right: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      .son1 {
        position: absolute;
        top: 20px;
        left: 23px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        width: 510px;
        font-size: 16px;
      }
    }
    .father2 {
      position: relative;
      border-radius: 10px;
      margin-bottom: 20px;
      background-color: #fff;
      flex: 3;
      height: 492.4px;
      .son2 {
        position: absolute;
        top: 20px;
        left: 23px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        width: 510px;
        font-size: 16px;
      }
    }
  }
  .bottomoffset {
    display: flex;
    .father3 {
      position: relative;
      border-radius: 10px;
      flex: 3;
      height: 485px;
      margin-right: 20px;
      background-color: #fff;
      .son3 {
        position: absolute;
        top: 20px;
        left: 23px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        width: 510px;
        font-size: 16px;
      }
    }
    .father4 {
      position: relative;
      border-radius: 10px;
      flex: 2;
      height: 485px;
      background-color: #fff;
      .son4 {
        position: absolute;
        top: 20px;
        left: 23px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        width: 510px;
        font-size: 16px;
      }
    }
  }
}
</style>
